<template>
	<confirm-container title="选择素材库图片" v-ref:modal class="wide-modal">
	  	<!-- 素材库 -->
	  	<div>
					<div class="frame-items clearfix">										  
						<photo-item cover="3" v-for="(index,item) in webiArray">
							<div  v-if="item.url.trim()!=''"  class="box img-responsive" :style="{ 'background-image': 'url(' + item.url + ')' }"></div>						
							<div  v-else class="placeholder-cover box img-responsive"></div>
							<h4>{{item.name}}</h4> 
							<input type="radio" name="key" :value="index" class="radio" :checked="index === 0">																
						</photo-item>																																																																																
				 </div>
				 <app-page v-ref:page></app-page>				 	
	  	</div>
	</confirm-container>	
</template>

<style>
ul.half li {
	float: left;
	border: solid 1px #383a3c;
	border-radius: 4px;
	-webkit-border-radius: 4px;		
	padding: 8px 16px;
	width: 220px;
	max-width: 50%;
	cursor: pointer;
}
ul.half li>a {
	color: inherit
}	
ul.half li.selected {
	color: #d81918 !important;
	border-color: #d81918 !important;
	position: relative;
	z-index: 20;	
}
ul.half li:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}
ul.half li:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}	
ul.half {
	display: inline-block;
}
</style>

<script>
import Page from './page.vue';	
	
export default {	
		props: {
			webiArray: {
				type: Array
			}		
		},
		components: {
			'app-page': Page
		},		
		data: () => ({
			itemIndex: 0
		}),			
		methods: {
			init() {
				this.getImages();
				//this.$refs.modal.init();					
			},
			hide() {
				this.$refs.modal.hide();
			},
			getImages() {
				let self = this;
				let data = {
					type: 'image'
				}
				data.aoData = this.$refs.page.setData();					
				this.$search({					  
						url: '/api/v1' + projectName_Url + '/wechat/media/query.html',
					  data
					}).then( response => {	
						if (response) {
							let total = response.content.total;
							this.$refs.page.init(total); 								
							let content = response.content;
							let arr = content.mediaList;
							this.$set("webiArray",arr);
							this.$nextTick(function () {
									if(self.webiArray.length>0) {					
										this.$refs.modal.init();	
									} else {	
										let message = {
											title:"温馨提示",
											content: "暂无图片内容"
										}
										Midway.alert(message);
									}
							})
						}
					}, response => {

					});				
			}
			
		},
    events: {
			resolve() {
					//素材库								
					let key = $("input[name=key]:checked").val();	
					let arr = this.webiArray;
					let pushArr = arr.filter( (element,index) => {						
						 return (index == key)
					});											  

					this.$dispatch("setPhoto",pushArr[0]);
					this.hide();
			},
			reject() {
				this.hide();
			},
			'pagination': 'getImages'					
	  },
	  beforeCompile() {
			//this.getImages();
		},
	  ready() {
			
		}		
}
</script>